Export diagram from model to mermaid code#174
Conversation
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
cheryl7114
requested review from
Copilot,
fantonangeli,
handreyrc,
kumaradityaraj and
lornakelly
and removed request for
Copilot and
lornakelly
✅ Deploy Preview for swf-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds Mermaid export capabilities to the diagram editor, exposing “copy” and “download” actions from the SidePanel and providing a core utility to generate Mermaid code.
Changes:
- Add
exportToMermaid+ clipboard/file download helpers insrc/core - Expose “Copy Mermaid Code” and “Download as Mermaid File” buttons in
SidePanel - Add i18n strings and tests for both core export and SidePanel rendering states
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/tests/side-panel/SidePanel.test.tsx | Adds UI-state tests for Mermaid export buttons visibility. |
| packages/serverless-workflow-diagram-editor/tests/core/mermaidExport.test.ts | Adds a unit test for Mermaid conversion output shape. |
| packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx | Adds export buttons + handlers wired to new Mermaid export helpers. |
| packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts | Adds English strings for Mermaid export UI. |
| packages/serverless-workflow-diagram-editor/src/core/mermaidExport.ts | Introduces Mermaid export, clipboard copy, and download helpers. |
| packages/serverless-workflow-diagram-editor/src/core/index.ts | Re-exports the new Mermaid export module. |
| .changeset/mermaid-export.md | Declares a minor release for the new functionality. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
cheryl7114
removed request for
fantonangeli,
handreyrc,
kumaradityaraj and
lornakelly
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
|
@cheryl7114, Could you take a look? |
| "sidebar.sectionSource": "Source", | ||
| "sidebar.viewSource": "View source", | ||
| "sidebar.noDetails": "No additional details for this node", | ||
| "sidebar.exportMermaid": "Export to Mermaid", |
There was a problem hiding this comment.
I dont see this used anywhere?
| import { parseWorkflow } from "../../src/core/workflowSdk"; | ||
| import { BASIC_VALID_WORKFLOW_YAML } from "../fixtures/workflows"; | ||
|
|
||
| describe("exportToMermaid", () => { |
There was a problem hiding this comment.
Should add more tests for other functions in file
| return navigator.clipboard.writeText(mermaidCode); | ||
| } | ||
|
|
||
| export function downloadMermaidFile(mermaidCode: string, filename: string = "mermaid.mmd"): void { |
There was a problem hiding this comment.
With this the filename is always mermaid.mmd to bind to filename, just double check if you can have spaces in document.name, if you can replace spaces with -?
Updated code in previous comment
| <> | ||
| <Button onClick={handleCopyMermaid} variant="outline" size="sm"> | ||
| <Copy /> | ||
| {isCopied ? t("sidebar.exportMermaid.copied") : t("sidebar.exportMermaid.copy")} |
There was a problem hiding this comment.
Would be nice to change the icon as well when it switches to Copied, maybe a check mark or something?
| setOpen(selectedNodeId !== null); | ||
| }, [selectedNodeId, setOpen]); | ||
|
|
||
| const copyTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null); |
There was a problem hiding this comment.
I would move all mermaid logic into its own file like MermaidActions and then just have something like
<SidebarFooter>
{model !== null && selectedNodeId == null &&< MermaidActions model={model}
</SidebarFooter>
| return convertToMermaidCode(workflow); | ||
| } | ||
|
|
||
| export function copyMermaidToClipboard(mermaidCode: string): Promise<void> { |
There was a problem hiding this comment.
copyMermaidToClipboard and downloadMermaidFile should probably be moved into lib folder and not in core which deals with sdk mainly
We can also make them more generic so they can be reused in the future, so maybe 2 files
lib/clipboard.ts and lib/download.ts
Dont name anything mermaid as it doesnt need to be specific to mermaid ... you could change the download a bit to something generic like downloadFile(content: string, filename:string, mimeType = "text/plain") and call it like :
const mermaidCode = exportToMermaid(model)
const filename = `${model.document?.name || workflow}.mmd`
downloadFile(mermaidCode, filename)
Changes Made
Added two buttons to export diagram model (JSON/YAML) to Mermaid: